<%--
  Created by IntelliJ IDEA.
  User: zhangyuan
  Date: 2020-10-13
  Time: 11:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=0.3, user-scalable=0, minimum-scale=0, maximum-scale=5.0,user-scalable=yes">
    <title>督办情况统计表</title>
    <link rel="stylesheet" href="/css/supervise/index.css">
    <link rel="stylesheet" href="../lib/layer/skin/default/layer.css">
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="../lib/layer/layer.js?20201106"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="/lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        table th,table td{
            text-align:left;
            padding:10px;
        }
        table thead{
            font-size: 13pt;
        }
        td{
            font-size: 11pt;
        }
        .ellipsis{
            width:95px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .M-box3 .active{
            margin: 0px 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            background: #2b7fe0;
            font-size: 12px;
            border: 1px solid #2b7fe0;
            color:#fff;
            text-align:center;
            display: inline-block;
        }
        .M-box3 a{
            margin: 0 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            font-size: 12px;
            display: inline-block;
            text-align:center;
            background: #fff;
            border: 1px solid #ebebeb;
            color: #bdbdbd;
            text-decoration: none;
        }
        .jump-ipt{
            margin: 0 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            font-size: 12px;
            float: left;
            border: 1px solid #ccc;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<body>
<div class="headTop">
    <div class="headImg">
        <img src="/img/commonTheme/${sessionScope.InterfaceModel}/icon_task.png" alt="">
    </div>
    <div class="divTitle">
        督办情况统计
    </div>
</div>
<div class="head w clearfix">
    <ul class="index_head">
        <li class="statusShow" type="1"><span class="one headli">未办结</span><img src="../img/twoth.png" alt=""/>
        </li>
        <li class="statusShow" type="2"><span class="headli">已办结</span><img src="../img/twoth.png" alt=""/>
        </li>
    </ul>
</div><!--标题导航结束-->

<%--查询条件--%>
<div class="clearfix">
    <label class="fl clearfix" style="margin-top: 23px;margin-left: 26px;">
        <span class="fl" style="margin-top: 5px;">标题：</span>
        <label class="fl"><input name="title" placeholder="标题" type="text" autocomplete="off"></label>
    </label>
    <label class="fl clearfix" style="margin-top: 23px;margin-left: 10px;" >
        <span class="fl" style="margin-top: 5px;">承办部门：</span>
        <label class="fl">
            <input type="text" name="deptName" readonly id="query_dept" placeholder="承办部门"  style="background:#e7e7e7;" autocomplete="off" >
        </label>
    </label>
    <label class="fl clearfix" style="margin-top: 23px;margin-left: 10px;" >
        <span class="fl" style="margin-top: 5px;">文件名称：</span>
        <label class="fl"><input name="fileName" placeholder="文件名称" type="text" autocomplete="off"></label>

        <button type="button" class="Query fl QuerySearch"><fmt:message code="global.lang.query"/></button>
    </label>
</div>

<div class="pagediv" id="pagediv" style="margin: 0 auto;width: 97%;display: block;margin-top: 10px;">
    <table>
        <thead>
        <tr>
            <th width="50">序号</th>
            <th>流水号</th>
            <th width="150">督办编号</th>
            <th width="200">标题</th>
            <th nowrap="nowrap">督办事项</th>
            <th nowrap="nowrap">督办来源</th>
            <th nowrap="nowrap">文件文号</th>
            <th>文件名称</th>
            <th>截止时间</th>
            <th>承办部门</th>
            <th>协办部门</th>
            <th width="100">当前办理人</th>
            <th>办理进度</th>
            <th id="daysRemaining">剩余天数</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div style="padding-top:10px;height:50px;width: 97%;" class="clearfix">
        <div id="dbgz_page" class="M-box3" style="float: right;">

        </div>
    </div>
</div>
<script>
    //默认显示未办结
    listShow(1)
    //切换tab
    $('.statusShow').click(function(){
        $(this).find('.headli').addClass('one').end().siblings().find('.headli').removeClass('one');
        if($(this).attr('type')==1){
            $('#daysRemaining').show()
        }else{
            $('#daysRemaining').hide()
        }
        listShow($(this).attr('type'))
    })
    /**
     * 列表显示
     * @param type
     * @returns {string|*}
     */
    function listShow(type,searchData) {
        var ajaxPageLe={
            data:{
                page:1,//当前处于第几页
                pageSize:10,//一页显示几条
                useFlag:true
            },
            page:function () {
                var me=this;
                $.ajax({
                    type:'get',
                    data:me.data,
                    url:'/document/SupervisionStatistics',
                    dataType:'json',
                    success:function(res){
                        var data=res.obj
                        var str='';
                        if(data.length>0){
                            for(var i=0;i<data.length;i++){
                                str+='<tr>' +
                                    '<td>'+(i+1)+'</td>' + //序号
                                    '<td>'+isUndefined(data[i].run_id)+'</td>' + //流水号
                                    '<td title="'+data[i].Data_122+'"><div class="ellipsis" style="width: 150px">'+isUndefined(data[i].Data_122)+'</div></td>' + //督办编号
                                    '<td title="'+data[i].Data_43+'"><div class="ellipsis" style="width: 200px"><a href="javascript:;" class="details" flowId='+data[i].flowId+' runId='+data[i].run_id+' >'+function () {
                                        if(data[i].work_level==0){
                                            return '<span style="color: green">[普通]</span>'
                                        }else if(data[i].work_level==1){
                                            return '<span style="color: red">[重要]</span>'
                                        }else if(data[i].work_level==2){
                                            return '<span style="color: red">[紧急]</span>'
                                        }else{
                                            return ''
                                        }
                                    }()+isUndefined(data[i].Data_43)+'</a></div></td>' + //标题
                                    '<td  title="'+data[i].Data_44+'"><div class="ellipsis">'+isUndefined(data[i].Data_44)+'</div></td>' + //督办事项
                                    '<td>'+isUndefined(data[i].Data_45)+'</td>' +  //督办来源
                                    '<td title="'+data[i].Data_47+'"><div class="ellipsis">'+isUndefined(data[i].Data_47)+'</div></td>' +  //文件文号
                                    '<td title="'+data[i].Data_51+'"><div class="ellipsis">'+isUndefined(data[i].Data_51)+'</div></td>' +  //文件名称
                                    '<td>'+isUndefined(data[i].Data_64)+'</td>' +  //截止时间
                                    '<td title="'+data[i].Data_70+'"><div class="ellipsis">'+(data[i].Data_70 ? data[i].Data_70.split('|')[1].replace(/,$/,'') : '')+'</div></td>' +  //承办部门
                                    '<td>'+(data[i].Data_65 ? data[i].Data_65.split('|')[1].replace(/,$/,'') : '')+'</td>' +  //协办部门
                                    '<td>'+(data[i].userName ? data[i].userName.replace(/,$/,'') : '')+'</td>' +  //当前办理人
                                    '<td>'+function () {
                                        if($('.one').text()=='未办结'){
                                            return '未办结'
                                        }else{
                                            return '已办结'
                                        }
                                    }()+'</td>' +  //办理进度
                                  function () {
                                    if($('.one').text()=='未办结' && data[i].day>=0){
                                        return '<td>'+isUndefined(data[i].day)+'天</td>' //剩余天数
                                    }else if($('.one').text()=='未办结' && data[i].day<0){
                                        return '<td>已延期</td>' //剩余天数
                                    }else{
                                        return '<td></td>'
                                    }
                                  }()+
                                    '</tr>';
                            }
                            $('.pagediv tbody').html(str);
                            me.pageTwo(res.totleNum,me.data.pageSize,me.data.page);
                        }else{
                            $.layerMsg({content:'没有更多内容！',icon:0});
                        }
                    }
                })
            },
            pageTwo:function (totalData, pageSize,indexs) {
                var mes=this;
                $('#dbgz_page').pagination({
                    totalData: totalData,
                    showData: pageSize,
                    jump: true,
                    coping: true,
                    homePage:'',
                    endPage: '',
                    current:indexs||1,
                    callback: function (index) {
                        mes.data.page=index.getCurrent();
                        mes.page();
                    }
                });
            }
        }
        if(type==1){
            ajaxPageLe.data.flag=1
        }else{
            ajaxPageLe.data.flag=2
        }
        var allData = $.extend(ajaxPageLe.data, searchData);
        ajaxPageLe.page();
    }

    //点击标题查看详情页面
    $(document).on('click','.details',function () {
        window.open('/workflow/work/workformPreView?flowId=' + $(this).attr('flowId') + '&flowStep=&prcsId=&runId=' + $(this).attr('runId'));
    })

    /**
     * 判断是否undefined
     * @param data
     * @returns {string|*}
     */
    function isUndefined(data) {
        if(data){
            return data
        }else{
            return ''
        }
    }

    $('#query_dept').click(function () {
        dept_id = 'query_dept';
        $.popWindow('/common/selectDept');
    });

    //查询
    $('.QuerySearch').click(function () {
        var searchData={
            title:$('[name="title"]').val(),
            deptName:$('#query_dept').attr('deptid'),
            fileName:$('[name="fileName"]').val()
        }
        listShow($('.one').parent().attr('type'),searchData)
    })
</script>
</body>
</html>
